<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">生成工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供各种生成工具，包括二维码、条形码、UUID等
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in generatorTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const generatorTools = [
  {
    id: 1,
    name: '二维码生成器',
    description: '快速生成二维码，支持自定义样式和尺寸',
    path: '/generator-tools/qrcode',
    icon: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4'
  },
  {
    id: 2,
    name: 'UUID生成器',
    description: '生成标准UUID标识符，支持多种版本',
    path: '/generator-tools/uuid',
    icon: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4'
  },
  {
    id: 3,
    name: '随机密码生成器',
    description: '生成高强度随机密码，可自定义规则',
    path: '/generator-tools/password',
    icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'
  },
  {
    id: 4,
    name: '条形码生成器',
    description: '生成各种格式的条形码',
    path: '/generator-tools/barcode',
    icon: 'M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'
  },
  {
    id: 5,
    name: '随机数生成器',
    description: '生成指定范围内的随机数',
    path: '/generator-tools/random-number',
    icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
  },
  {
    id: 6,
    name: '哈希生成器',
    description: '生成各种哈希值（MD5、SHA1、SHA256等）',
    path: '/generator-tools/hash',
    icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
  }
  ,
  {
    id: 7,
    name: '印章生成器',
    description: '生成仿真印章图片，支持文字、颜色与尺寸，可下载PNG',
    path: '/generator-tools/stamp',
    icon: 'M12 2a10 10 0 110 20 10 10 0 010-20z'
  }
]

// SEO
useHead({
  title: '生成工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线生成工具，提供二维码生成、UUID生成、密码生成、条形码生成、随机数生成、哈希生成等多种实用功能' },
    { property: 'og:title', content: '生成工具 - 八八在线工具' },
    { property: 'og:description', content: '在线生成工具，提供二维码生成、UUID生成、密码生成等多种实用功能' }
  ]
})
</script>